<template>
  <div :style="{ left, bottom }" class="legend">
    <img
      :class="{ greyIcon: !state.isShowLegendList }"
      class="legendIcon"
      src="./icon.png"
      @click="handleClickShowLegend"
    />
    <div v-show="state.isShowLegendList" class="legendListBox">
      <!-- <div class="title">
        <h3><img src="./icon.png" />图例</h3>
      </div> -->
      <div v-for="(item, index) in state.legendData" :key="index" class="legendWwrapper">
        <h3 class="titleItem"
          ><strong>{{ item.title }}</strong></h3
        >
        <ul class="legendList">
          <li
            v-for="(child, i) in item.data"
            :key="i"
            :class="{ isShow: !child.status }"
            @click.stop="handleClickLegendItem(child)"
          >
            <img v-if="child.icon" :src="child.icon" alt="图标" />
            <span>{{ child.name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  /*import { setLayerVisible } from 'gmap-ol';
import { getGlobalMap } from '@/components/GlobalMap';
import { showStation } from '@/components/GlobalCesium/src/cesiumGlobe';*/
  import { showStation } from '@/components/GlobalVideo';

  defineOptions({ name: 'LegendPage' });
  const emit = defineEmits(['change-legend-data']);

  const props = defineProps({
    left: {
      type: String,
      default: '-50px',
    },
    bottom: {
      type: String,
      default: '0',
    },
    data: {
      type: [Number, Array, String] as PropType<string | string[]>,
      default: '',
    },
  });

  const state = reactive({
    isShowLegendList: false,
    legendData: [...props.data],
  });

  const handleClickShowLegend = () => {
    state.isShowLegendList = !state.isShowLegendList;
  };

  // 点击图例icon
  const handleClickLegendItem = (item) => {
    const dataArr = state.legendData;
    const legendData = dataArr.reduce((acc, curr) => {
      return acc.concat(curr.data);
    }, []);
    for (let i = 0; i < legendData.length; i++) {
      if (legendData[i].name === item.name) {
        const status = !legendData[i].status;
        legendData[i].status = status;
      }
    }

    // 遍历legendData数组，赋值状态
    dataArr.forEach((legendItem) => {
      legendItem.data.forEach((item) => {
        const foundItem = legendData.find((dataItem) => dataItem.name === item.name);
        if (foundItem) {
          item.status = foundItem.status;
        }
      });
    });
    emit('change-legend-data', legendData);
    changeLegendStatus(legendData);
  };

  const changeLegendStatus = (legendData) => {
    // const olMap = getGlobalMap();
    for (let i = 0; i < legendData.length; i++) {
      const type = legendData[i].type;
      const status = legendData[i].status;
      console.log(type, status, 'type, statustype, status');
      showStation(type, status);
      /*if (olMap) {
        setLayerVisible(olMap, type, status);
      }*/
    }
  };

  /*onMounted(() => {
    changeLegendStatus(state.legendData);
  });*/
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .legend {
    width: 40px;
    height: 40px;
    // background: rgba(251, 252, 255, 1);
    background: rgba(50, 120, 160, 0.6);
    box-shadow: 0px 4px 6px 0px #03225917;
    border-radius: 6px;
    // border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;

    img.legendIcon {
      width: 24px;
      height: 25px;
      cursor: pointer;
      filter: brightness(100%) saturate(100%) invert(0%);
    }

    &:hover,
    &:active {
      background: rgba(50, 120, 160, 1);

      img.greyIcon {
        filter: brightness(125%) saturate(125%) invert(0%);
      }
    }

    .legendListBox {
      position: absolute;
      right: 50px;
      bottom: 0;
      width: 220px;
      background: rgba(2, 18, 52, 0.3);
      backdrop-filter: blur(4px);
      box-shadow:
        11px 22px 31px 0px rgba(3, 34, 89, 0.06),
        0px 0px 30px 0px rgba(6, 183, 253, 0.46) inset;
      border: 1px solid;
      border-image: linear-gradient(180deg, rgba(6, 183, 253, 0.38) 0%, rgba(3, 122, 255, 0.38) 100%);
      border-image-slice: 1;

      .legendWwrapper {
        position: relative;
        padding: 6px 6px 6px 6px;
        border-top: 1px solid rgba(126, 148, 196, 0.35);

        .titleItem {
          width: 100%;
          height: 24px;
          color: #fff;
          padding: 0 8px 0 8px;
          position: relative;

          strong {
            position: absolute;
            z-index: 100;
            left: 14px;
            top: 0px;
            font-size: 15px;
            font-style: italic;
          }

          &::before {
            content: '';
            display: inline-block;
            width: 78px;
            height: 24px;
            background: url(./title.png) no-repeat;
            background-size: cover;
            position: absolute;
            left: -6px;
          }
        }
      }

      .legendWwrapper:nth-child(1) {
        border-top: none;
      }

      ul.legendList {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-row-gap: 8px;
        grid-column-gap: 6px;
        border-radius: 2px;
        padding: 10px 10px 10px 10px;

        li {
          display: flex;
          align-items: center;
          cursor: pointer;

          img {
            margin-right: 6px;
            max-height: 20px;
          }

          span {
            color: #fff;
            font-size: 14px;
          }
        }

        .isShow {
          filter: grayscale(100%) !important;
          opacity: 0.7 !important;
        }
      }
    }
  }
</style>
